/*
学习目标：上传图片到自己的文件服务器
1. 设置三个关键的属性
2. 提示改成中文
3. 调整卡片类型

学习目标：阻止非图片类型的文件上传
1. 使用beforeUplaod钩子函数
2. 写上判断逻辑，非图片类型文件，阻止上传
3. 显示默认支持的文件类型

学习目标：控制上传文件的数量
1. 声明state.fileList准备驱动视图
2. onChange时更新fileList
*/ 

import { Button, message, Modal, Upload } from 'antd';
import React, { useState } from 'react'
import { UploadOutlined } from '@ant-design/icons';
import { baseURL } from 'utils/request';
import { getToken } from 'utils/storage';
export default function TestPage() {
    const [imgUrl, setImgUrl] = useState('')
    const [fileList, setFileList] = useState([])
    const props = {
        name: 'image',
        accept:".jpg,.png,.jpeg",
        action: `${baseURL}/v1_0/upload`,
        headers: {
          authorization: `Bearer ${getToken()}`,
        },
        onChange(info) {
        //   if (info.file.status !== 'uploading') {
        //     console.log(info.file, info.fileList);
        //   }
            console.log('info32  ----->  ', info);
            setFileList(info.fileList)
          if (info.file.status === 'done') {
            message.success(`${info.file.name} 上传成功`);
          } else if (info.file.status === 'error') {
            message.error(`${info.file.name} 上传失败`);
          }
        },
        onPreview(file){
            console.log('file31  ----->  ', file);
            // 2预览时存储文件
            setImgUrl(file.thumbUrl)
        },
        beforeUpload(file){
            const allFileType=["image/png","image/jpg","image/jpeg"]
            console.log('file37  ----->  ', file);
            if(!allFileType.includes(file.type)){
                message.warning('上传的格式无效')
                return Upload.LIST_IGNORE
            }
        }
      };
  return (
      <>
      {/* 🔔记得把fileList设置给Upload组件 ,fileList类似Input的value属性，控制它的值*/}
      <Upload listType="picture-card" {...props} fileList={fileList}>
    {fileList.length<3 &&<Button icon={<UploadOutlined />}></Button>}
  </Upload>
    <Modal title="封面预览" visible={!!imgUrl} footer={null} onCancel={()=>setImgUrl('')} centered={true}>
        <img width={400} src={imgUrl}/>
      </Modal>
      </>
    
  )
}
